<template>
  <div class="homePage">
    <p>第 {{ year }} 年</p>
    <p>姓名： {{ nickname }}</p>
    <p>年龄： {{ age }}</p>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs } from 'vue'
export default defineComponent({
  name: 'dicConfig',
  setup() {
    const year = ref(0)
    const user = reactive({ nickname: 'xiaofan', age: 26, gender: '女' })
    setInterval(() => {
      year.value++
      user.age++
    }, 1000)
    return {
      year,
      // 使用reRefs
      ...toRefs(user)
    }
  }
})
</script>
